html,
body {
  background: linear-gradient(30deg, skyblue, violet, skyblue);
  font-family: 'Nunito', sans-serif;
  font-weight: 100;
  height: 100vh;
  margin: 0;
}

.shadow {
  box-shadow: 0px 0px 100px rgba(100, 100, 100, .5);
}

main>article {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  margin: 20px;
  padding: 10px;
  display: flex;
  width: 80%;
  height: 80%;
}

article>article {
  width: 50%;
  margin: 10px;
}

.linear-vertical {
  display: flex;
  flex-direction: column;
}

.linear-horizon {
  display: flex;
  flex-direction: row;
}

.flex-center {
  /* 不加上，上下会顶到底 */
  align-items: center;
  display: flex;
  /* 水平居中 */
  justify-content: center;
}

.full-height {
  height: 100vh;
}

.position-ref {
  position: relative;
}

article>article>* {
  margin: 10px;
}

label {
  font-size: 26px;
}

textarea {
  /* background: whitesmoke; */
  background-color: rgba(255, 255, 255, 0.5);
  padding: 1em 2em 1em 2em;
  border-radius: 20px;
  border: none;
  /* border-left: solid 4px gainsboro; */
  height: -webkit-fill-available;
  margin: 10px 0 0 0;
  font: 'Nunito';
  font-family: 'Nunito', sans-serif;
}

.fill-hight {
  height: -webkit-fill-available;
}

.fill-width {
  width: -webkit-fill-available;
}

#input-code {
  height: 90%;
  padding: 0 40px 0 0;
}

button {
  /* background: whitesmoke; */
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  margin: 0 3px 0 3px;
  border-radius: 20px;
  padding: 5px;
}

article>footer {
  padding: 0 40px 0 0;
}